<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    setup上下文对象
  </head>
  <body>
    <div id="app">
      <my-com
        ref="comref"
        class="myBox"
        style="color: red"
        id="box"
        msg="hello msg"
        @my-event="getData"
      >
        <template #header> header </template>
        <div>content</div>
        <template #footer> footer </template>
      </my-com>
    </div>
  </body>

  <template id="com">
    <div>
      <h1>子组件</h1>
      <button @click="sendData">发送数据</button>
      <slot name="header"></slot>
      <slot></slot>
      <slot name="footer"></slot>
    </div>
  </template>

  <script src=""></script>
  <script>
    const Com = {
      template: "#com",
      setup(props, context) {
        /* 
                attrs 获取透传过来的值
                slots 如果使用了插槽
                emit  子组件给父组件传值
                expose 子组件暴露给父组件可以调用的属性和方法 ---- options API  ref获取子组件的实例

            */
        console.log(props);
        console.log(context.attrs); // ref 不在透传之列
        console.log(context.slots);
        const sendData = () => {
          // 子组件给父组件传值
          context.emit("my-event", 1000);
        };

        // 自定义的属性和方法，供给父组件使用
        const a = ref(1);
        const b = ref(2);
        const c = ref(3);

        const fn = () => {
          a.value = 100;
        };

        // 暴露出去的是对象
        context.expose({
          a,
          b,
          fn,
        });

        return {
          sendData,
        };
      },
    };

    Vue.createApp({
      setup() {
        const getData = (val) => {
          // 接收子组件的值
          console.log("666", val);
        };

        const comref = ref(); //  comref 就是模版中ref="comref"

        onMounted(() => {
          console.log("com", comref.value); // {a, b, fn }
          console.log("a", comref.value.a); // 1
          console.log("b", comref.value.b); // 2
          console.log("c", comref.value.c); // undefined 因为没有暴露
          comref.value.fn();
          console.log("a", comref.value.a); // 100
        });

        return {
          getData,
          comref,
        };
      },
      components: {
        MyCom: Com,
      },
    }).mount("#app");
  </script>
</html>
